<template>
	<sl-page title="添加地址">
		<!-- 表单组件 -->
		<view class="s-form address">
			<view class="s-form__item">
				<view class="s-form__item--label">收货人名</view>
				<view class="s-form__item--control">
					<input class="form-item--input" type="text" v-model="form.consignee" maxlength="30" placeholder="请输入姓名" />
				</view>
			</view>
			<view class="s-form__item">
				<view class="s-form__item--label">手机号码</view>
				<view class="s-form__item--control">
					<input class="form-item--input" type="number" v-model="form.phone" maxlength="11" placeholder="请输入手机号码" />
				</view>
			</view>
			<view class="s-form__item" @click="regionSelect.show = true">
				<view class="s-form__item--label">所在地区</view>
				<view class="s-form__item--control">
					<input class="form-item--input" type="text" v-model="form.areaName" placeholder="省、市、区" readonly="true"
						disabled="true" @click="regionSelect.show = true" />
				</view>
				<view class="s-form__item--append flex-middle-center">
					<uni-icons class="region-select icon" type="location"></uni-icons>
				</view>
			</view>
			<view class="s-form__item">
				<view class="s-form__item--label">详细地址</view>
				<view class="s-form__item--control">
					<input class="form-item--input" type="text" v-model="form.address" placeholder="街道门牌号、楼层等信息" />
				</view>
			</view>
			<view class="s-form__item" @click="form.isDefault = form.isDefault?0:1">
				<view class="s-form__item--label">设为默认地址</view>
				<view class="flex-box"></view>
				<view class="s-form__item--append">
					<view class="address_default" :class="{'checked': form.isDefault===1}"></view>
				</view>
			</view>
		</view>
		<view class="action btn-primary" :class="{'disable': !verifyPassed}" @click.stop="onSubmit()">保存
		</view>

		<!-- 选择 -->
		<region :show.sync="regionSelect.show" @region:picker="onRegionPicker"></region>
	</sl-page>
</template>

<script>
	import * as Verify from '@/utils/verify';
	import AddressApi from '@/api/address/address.js';
	import Region from '@/pages/components/address/region.vue';

	export default {
		name: 'createAddress',
		components: {
			Region
		},
		data() {
			return {
				form: {
					consignee: '',
					phone: '',
					areaId: '',
					areaName: '',
					address: '',
					isDefault: 0
				},
				regionSelect: {
					show: false
				},
				verifyPassed_consignee: false,
				verifyPassed_phone: false,
				verifyPassed_areaName: false,
				verifyPassed_address: false,
			};
		},
		watch: {
			'form.consignee': function() {
				this.verifyPassed_consignee = this.VerifyConsignee();
			},
			'form.phone': function() {
				this.verifyPassed_phone = this.VerifyPhone();
			},
			'form.areaName': function() {
				this.verifyPassed_areaName = this.VerifyAreaName();
			},
			'form.address': function() {
				this.verifyPassed_address = this.VerifyAddress();
			},
		},
		computed: {
			verifyPassed: function() {
				return this.verifyPassed_consignee && this.verifyPassed_phone &&
					this.verifyPassed_areaName && this.verifyPassed_address;
			}
		},
		methods: {
			VerifyConsignee: function() {
				return !Verify.isEmpty(this.form.consignee);
			},
			VerifyPhone: function() {
				return !(Verify.isEmpty(this.form.phone) || !Verify.isMobile(this.form.phone))
			},
			VerifyAreaName: function() {
				return !(Verify.isEmpty(this.form.areaName))
			},
			VerifyAddress: function() {
				return !(Verify.isEmpty(this.form.address))
			},
			onSubmit() {

				if (!this.VerifyConsignee()) {
					this.$app.toast('请输入收货人!')
					return;
				}

				if (!this.VerifyPhone()) {
					this.$app.toast('请输入正确的手机号!')
					return;
				}
				if (!this.VerifyAreaName()) {
					this.$app.toast('请选择所在区域!')
					return;
				}
				if (!this.VerifyAddress()) {
					this.$app.toast('请输入详细地址!')
					return;
				}

				// 提交收货地址
				this.doSubmit();
			},
			doSubmit() {
				AddressApi.save(this.form).then(() => {
					this.$app.toast('新增收货地址成功!');
					this.onBackPage();
				});
			},
			onRegionPicker: function(region) {
				if (region) {
					this.form.areaId = region.id;
					this.form.areaName = region.name;
				}
			},
			onBackPage: function() {
				this.$app.redirectTo('xj_user/address/index');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.address{
		margin: 24rpx 16rpx;
	}
	
	.action {
		width: 530rpx;
		margin: 0 auto;
		margin-top: 72rpx;
	}

	.region-select {
		font-size: $uni-iconfont-size;
	}

	.address_default {
		position: relative;
		border-radius: 50%;
		width: 22px;
		height: 22px;
		display: inline-block;
		border: 1px solid #d1d1d1;
		background-color: #fff;

		&.checked {
			border-radius: 0% 0% 100% 100%;
			background-image: url("@/static/checked.png");
			background-repeat: no-repeat;
			/* 控制图片不重复 */
			background-size: cover;
			/* 调整图片大小以适应div尺寸 */
			/* 可选：以下属性用于对齐和定位图片 */
			background-position: center center;
			/* 居中对齐 */
			
		}
	}
</style>